import { AtButton, AtForm, AtInput, AtList, AtListItem, AtNavBar, } from 'taro-ui';
import { View } from "@tarojs/components"
import React from 'react';
import Taro from '@tarojs/taro';
import config from '../../config.json';
import "./userinfo.less";
import { Picker } from 'antd-mobile'


interface infos {
    teacherId: string,
    name: string,
    department: string,
    phone: string,
    note: '',
    authority: '',
    email: ''
}


const basicColumns = [
    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
    ['1', '222222222222222222222222222222222', '3'],
  ]
  
  

class Info extends React.Component<any, any>{
    constructor(props) {
        super(props);
        this.state = {
            flag: window.location.href.split("?")[1].split("=")[1],
            visible: false,
            data: {
                uid: '',
                name: '',
                department: '',
                phone: '',
                note: '',
                authority: '',
                email: '',
                selector: []
            }
        }
    }



    async componentDidMount() {
        let _this = this;
        Taro.request({
            url: config.domainName + '/user/get',
            method: "GET",
            data: {},
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState((state) => {
                        state.data = {
                            authority: res.data.data.authority,
                            department: res.data.data.department,
                            name: res.data.data.name,
                            phone: res.data.data.phone,
                            uid: res.data.data.uid,
                            note: res.data.data.note,
                            selector: state.data.selector,
                            email: res.data.data.email
                        }
                        return state;
                    })
                    console.log(res.data.data);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            }
        });
        let res = await Taro.request({
            url: config.domainName + '/department/query',
            method: "GET",
            data: {},
            header: {
                token: Taro.getStorageSync('token'),
            }
        });
        this.setState((state) => {
            state.data.selector = res.data.data.map((value) => {
                return value.name
            });
            return state
        })
    }

    onSubmit() {
        let _this = this;
        if (this.state.data.name && this.state.data.department && this.state.data.phone) {

            Taro.request({
                url: config.domainName + '/user/update',
                method: "POST",
                data: {
                    id: this.state.data.id,
                    name: this.state.data.name,
                    department: this.state.data.department,
                    phone: this.state.data.phone,
                    note: this.state.data.note,
                    authority: this.state.data.authority,
                    email: this.state.data.email
                },
                header: {
                    token: Taro.getStorageSync('token'),
                },
                success(res) {
                    console.log(_this.state.flag);
                    if (res.data.code === 0) {
                        if (res.data.data) {
                            Taro.showToast({
                                title: '修改成功',
                                icon: "success"
                            })
                            if (_this.state.flag === '2') {
                                Taro.switchTab({
                                    url: "/pages/index/index"
                                })
                            } else {
                                setTimeout(() => {
                                    Taro.navigateBack({
                                        delta: 2
                                    })
                                }, 500)
                            }


                        } else {
                            Taro.showToast({
                                title: '修改失败',
                                icon: "error" as any
                            })
                        }
                        console.log(res.data.data);
                    } else {
                        Taro.showToast({
                            title: '服务器异常',
                            icon: "error" as any
                        })
                    }
                }
            })
        } else {
            Taro.showToast({
                title: '请完整填写信息',
                icon: "error" as any
            })
        }

    }
    handleChange(value, evt) {
        let _this = this;
        if (value === "department") {
            this.setState((state) => {
                state.data.department = evt[0];
                return state;
            })

        } else {

            this.setState((state) => {
                state.data[value] = evt;
                return state;
            });
            return value;
        }
    }

    showPiker() {
        console.log(1); 
        this.setState({visible: true});
    }

    render() {
        console.log(this.state.data)
        return (
            <>
                {this.state.flag === '1' ? <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='修改个人信息'
                    leftIconType="chevron-left"
                /> : ""}
                {
                    (() => {
                        if (this.state.flag === '2') {
                            return (
                                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: 20 }}>
                                    <View className="module-title">初始化信息</View>
                                </View>
                            )
                        } else {
                            return (
                                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: 20 }}>
                                    <View className="module-title">填写信息</View>
                                </View>
                            )
                        }
                    })()
                }

                <AtForm>
                    <AtInput
                        required
                        title="教工号:"
                        name="uid"
                        type="text"
                        value={this.state.data.uid}
                        onChange={this.handleChange.bind(this, 'uid')}
                    />
                    <AtInput
                        required
                        title="姓名:"
                        name="name"
                        type="text"
                        value={this.state.data.name}
                        onChange={this.handleChange.bind(this, 'name')}
                    />
                    <AtInput
                        title="系部"
                        name="department"
                        type="text"
                        value={this.state.data.department}
                        onChange={() => { }}
                        required
                        onFocus={this.showPiker.bind(this)}
                    ></AtInput>
                    <AtInput
                        required
                        title="电话:"
                        name="phoneNumber"
                        value={this.state.data.phone}
                        onChange={this.handleChange.bind(this, 'phone')}
                    />
                    <AtInput
                        title="备注:"
                        name="remark"
                        value={this.state.data.note}
                        onChange={this.handleChange.bind(this, 'note')}
                    />
                    <AtInput
                        title="邮箱:"
                        name="email"
                        value={this.state.data.email}
                        onChange={this.handleChange.bind(this, 'email')}
                    />
                    <View style={{ margin: "0 10px" }}>
                        <AtButton type="primary" onClick={this.onSubmit.bind(this)}>提交</AtButton>
                    </View>
                    <Picker
                        columns={[this.state.data.selector]}
                        visible={this.state.visible}
                        onClose={() => {
                            this.setState({visible: false})
                        }}
                        value={[this.state.data.department]}
                        onConfirm={this.handleChange.bind(this, "department")}
                    />
                </AtForm>
            </>

        )
    }

}


export default Info;